<!--
 * @Date: 2020-09-14 20:51:20
 * @LastEditors: 小枫
 * @LastEditTime: 2020-09-20 09:56:17
 * @FilePath: \feng-blog\src\views\Editor.vue
-->
<template lang="pug">
.editor
  .info-bar
    el-input(
      v-model="article.title",
      style={ flex: '5', padding: '10px' },
      placeholder="请输入标题"
    )
    el-select(
      v-model="article.tid",
      style={ flex: '3', padding: '10px' },
      placeholder="请选择分类"
    )
      el-option(
        v-for="item in tags",
        :key="item.tid",
        :label="item.tag",
        :value="item.tid"
      )
    .btn(style={ flex: '1', padding: '10px' })
      el-button(type="primary", @click="saveContent") 发布
  mavon-editor(
    v-model="oldContent",
    @save="saveContent",
     @change="changeData",
    style="min-height: 500px",
    :ishljs = "true"
  )
  .tips 按F10全屏,F12切换单双屏,Ctrl+S发布
</template>

<script>
export default {
  // 本地图片上传需要配置cdn
  data() {
    return {
      oldContent: "",
      tags: [],
      article: {
        title: "",
        content: "",
        tid: "",
      },
    };
  },
  methods: {
    changeData(value, render) {
      // console.log(value);
      // console.log(render);
      this.article.content = render;
    },
    saveContent() {
      if(this.article.title === '') {
        this.$message({
          type: 'info',
          message: '标题不可为空'
        })
        return
      } else if(this.article.tid === '') {
        this.$message({
          type: 'info',
          message: '分类不可为空'
        })
        return
      }
      this.$http.post("/articles", this.article).then((res) => {
        if (res) {
          this.$message({
            type: "success",
            message: "发布成功",
          });
          this.$router.push(`/articles/${res.data.msg.insertId}`);
        }
      });
    },
    getTags() {
      this.$http.get("/tags").then((res) => {
        if (res) {
          this.tags = res.data.data;
        }
      });
    },
  },
  created() {
    this.getTags();
  },
};
</script>

<style lang="less" scoped>
.editor {
  width: 60%;
  margin: 0 auto;
  .info-bar {
    margin-top: 30px;
    margin-bottom: 30px;
    display: flex;
  }
  .tips {
    margin-top: 30px;
  }
}
</style>